<template>
    <div id="schoolInfo">
        <ul class="list-group">
            <li class="list-group-item">
               	学校名称<span style="color: #f73535;">*</span>
                <input class="mustInput" type="text" v-model="school.name" placeholder="请填写真实学校名称"/>
            </li>
            <li class="list-group-item">学校类别
                <div class="styled-select">
                    <span class="pull-right required xia"><img src="../assets/xia.png"/></span>
                    <select v-model="school.type" name="type">
                        <option v-for="(item,index) in typedata" :value="item.id" >{{ item.name }}</option>
                    </select>
                </div>
            </li>
            <li class="list-group-item">学校类型
                <div class="styled-select">
                    <span class="pull-right required xia"><img src="../assets/xia.png"/></span>
                    <select v-model="school.category" name="category">
                        <option v-for="(item,index) in categorydata" :value="item.id" >{{ item.name }}</option>
                    </select>
                </div>
            </li>
            <li class="list-group-item">学校地址
                <span class="pull-right required ads xia">
                	<div id="trigger5" style="width:4.35rem;height:0.4rem;color: #777;overflow: hidden;">
                        <span style="float: right;">{{provinceTitle}} <img src="../assets/xia.png"/></span>
                    </div>
              	</span>
                <div class="xiangxi">
                   	 详细地址<input type="text" name="address" value="" placeholder="请填写详细地址" v-model="school.address" />
                </div>
            </li>
        </ul>
        <!--添加职务模块-->
        <div class="panel panel-default">
            <div class="panel-heading"></div>
            <div class="panel-body">
            	<div class="block">
            		<li class="list-group-item" style="padding: 0;">
	                	<li class="list-group-item xiaozhang listTitle">
		                    <img src="../assets/per.png"/> 添加校长
		                    <!--principal 为false显示  为true 隐藏-->
		                    <template v-if="!principal">
		                        <router-link :to="{ name: 'addPerson' ,params: {role: 1} }">
									<span class="pull-right required">
										<img src="../assets/jiahao.png"/>
									</span>
		                        </router-link>
		                    </template>
		                </li>
	                    <ul class="list-group">
	                        <div v-for="(personne,key) in personnelArray" :key="key">
	                            <template v-if="personne.role == 1">
	                            	<router-link :to="{ name: 'edit' , params: {index: key }}">
		                                <li class="list-group-item second" >{{ personne.name }}
				                            <span class="pull-right required">
				                                <img  src="../assets/write.png"/>
				                            </span>
		                                </li>
	                                </router-link>
	                            </template>
	                        </div>
	                    </ul>
	               </li>
                </div>
                <div class="block">
		            <router-link :to="{ name: 'addPerson' ,params: {role: 2} }">
		                <li class="list-group-item" style="padding: 0;">
		                	<li class="list-group-item xiaozhang listTitle">
			                    <img src="../assets/duo.png"/> 添加副校长
		                    </li>
		                    <ul class="list-group two">
		                        <div v-for="(personne,key) in personnelArray" :key="key">
		                            <template v-if="personne.role == 2">
		                                <router-link :to="{ name: 'edit' , params: {index: key }}">
			                                <li class="list-group-item" >{{ personne.name }}
					                            <span class="pull-right required">
					                                <img  src="../assets/write.png"/>
					                            </span>
			                                </li>
		                                </router-link>
		                            </template>
		                        </div>
		                    </ul>
		                </li>
		            </router-link>
                </div>
                <router-link :to="{ name: 'addPerson' ,params: {role: 3} }">
	                <li class="list-group-item" style="padding: 0;">
	                	<li class="list-group-item xiaozhang listTitle">
		                    <img src="../assets/duo.png"/> 添加教导主任
		                </li>
	                    <ul class="list-group two">
	                        <div v-for="(personne,key) in personnelArray" :key="key">
	                            <template v-if="personne.role == 3">
	                            	<router-link :to="{ name: 'edit' , params: {index: key }}">
		                                <li class="list-group-item" >{{ personne.name }}
				                            <span class="pull-right required">
				                                <img  src="../assets/write.png"/>
				                            </span>
		                                </li>
	                                </router-link>
	                            </template>
	                        </div>
	                    </ul>
	                </li>
                </router-link>
            </div>
            <div class="panel-footer"></div>
        </div>
        <!--添加职务模块end-->
        <!--添加年级模块-->
        <div class="panel panel-default">
            <div class="panel-body">
                <ul class="list-group">
                	<li class="list-group-item" style="padding: 0;">
                		<router-link :to="{path: '/Grade'}">
	                    	<li class="list-group-item nianji listTitle">
		                        <img src="../assets/grade.png"/> 添加年级
		                    </li>
	                    </router-link>
                        <ul class="list-group two">
                        	<div v-for="(grade,key) in gradeArray" :key="key">
	                        	<router-link :to="{ name: 'GradeEdit' , params: { index: key,'gradeId': grade.grade_id}}">
			                        <li class="list-group-item">{{ grade.name }}
										<span class="pull-right required">
											<img src="../assets/write.png"/>
										</span>
			                        </li>
	                            </router-link>
	                        </div>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!--添加年级模块end-->
        <!--教材版本-->
        <div class="panel panel-default">
            <div class="panel-heading"></div>
            <div class="panel-body">
                <ul class="list-group">
                    <router-link :to="{path: '/Subject'}">
                        <li class="list-group-item" v-model="school.textbook_edition" style="border-bottom: none;">教材版本
                            <div class="styled-select">
			            		<span class="pull-right required right">
			            			<img src="../assets/jt.png"/>
			            		</span>
                            </div>
                        </li>
                    </router-link>
                    <div v-if="this.$store.state.system.school.type == 1">
                        <li class="list-group-item">小升初政策
                            <input class="mustInput policy" type="text" v-model="school.policylist" placeholder="请填写小升初政策"/>
                        </li>
                    </div>
                    <div v-if="this.$store.state.system.school.type == 1 || this.$store.state.system.school.type == 2">
                        <li class="list-group-item">是否五四制学校
                            <span class="pull-right required switch">
                                <my-switch  size="lg" on-label="foo" off-label="bar" on-value="1" off-value="2" v-model="school.is_schoolsdata"></my-switch>
                            </span>
                        </li>
                    </div>
                    <div v-if="this.$store.state.system.school.type === 2">
	                    <li class="list-group-item" style="border-bottom: none;">中考科目及总分<br />
	                        <textarea class="zhongKao" v-model="school.total_score" name="total_score" placeholder="请填写中考科目及总分"></textarea>
	                    </li>
	                </div>
                    <div v-if="this.$store.state.system.school.type === 3">
                        <li class="list-group-item">高考选卷
                            <div class="styled-select">
                                <span class="pull-right required xia">
                                    <img src="../assets/xia.png"/>
                                </span>
                                <select v-model="school.volume" name="volume">
                                    <option v-for="(item,index) in volumedata" :value="item.id">{{item.name}}</option>
                                </select>
                            </div>
                        </li>
                    </div>
                    <div v-if="this.$store.state.system.school.type === 3">
	                    <li class="list-group-item">教学顺序
	                        <div class="styled-select">
			            		<span class="pull-right required xia">
			            			<img src="../assets/xia.png"/>
			            		</span>
	                            <select class="order" v-model="school.teaching_order" name="teaching_order" >
	                                <option v-for="(item,index) in teaching_orderdata"  :value="item.id">{{ item.name }}</option>
	                            </select>
	                        </div>
	                    </li>
                    </div>
                    <li class="list-group-item" style="padding: 0;border: none;">
                    	<router-link :to="{path: '/bookstore'}">
		                    <li class="list-group-item xiaozhang listTitle">
		                        <img src="../assets/shu.png"/> 校园书店
		                    </li>
	                    </router-link>
	                    <ul class="list-group two">
	                    	<div v-for="(item,key) in bookstoreArray" :key="key">
		                    	<router-link :to="{ name: 'bookstoreEdit' , params: { index: key }}">
		                            <li class="list-group-item">{{ item.name }}
											<span class="pull-right required">
												<img src="../assets/write.png"/>
											</span>
		                            </li>
	                            </router-link>
	                        </div>
                       </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!--教材版本end-->
        <div class="footer_btn">
            <button type="button" @click="$store.commit('save')"  class="btn btn-primary btn-lg btn-block">保存</button>
        </div>
        <!--底部-->
        <CommonFooter></CommonFooter>
        <!--底部end-->
    </div>
</template>

<script>
	import 'babel-polyfill'
    import CommonFooter from './CommonFooter'
    import mySwitch from 'vue-switch/switch-2.vue'
    export default {
        name: 'schoolInfo',
        components: {
            CommonFooter,
            'my-switch': mySwitch
        },
        computed: {
            school () {
                return this.$store.state.system.school
            },
            schoolArray () {
                return this.$store.state.system.schoolArray
            },
            grade () {
                return this.$store.state.system.grade
            },
            gradeArray () {
                return this.$store.state.system.gradeArray
            },
            personnelArray () {
                return this.$store.state.system.personnelArray
            },
            principal () {
                return this.$store.state.system.principal
            },
            typedata () {
                return this.$store.state.system.typedata
            },
            categorydata () {
                return this.$store.state.system.categorydata
            },
            policylistdata () {
                return this.$store.state.system.policylistdata
            },
            volumedata () {
                return this.$store.state.system.volumedata
            },
            teaching_orderdata () {
                return this.$store.state.system.teaching_orderdata
            },
            provinceTitle () {
                return this.$store.state.system.provinceTitle
            },
            bookstoreArray () {
                return this.$store.state.system.school.bookstore
            },
            bookArray () {
                return this.$store.state.system.bookArray
            }
        },
        mounted () {
            this.$store.dispatch('getProvince')
        },
        methods: {
        }
    }
</script>
<style>
    li{
        font-size: 0.3rem;
    }
    .footer_btn{
        padding: 0 0 1.2rem 0;
    }
    .btn{
        border: none!important;
        outline: none!important;
    }
    .mustInput{
        width: 75%;
        text-indent: 1em;
    }
    select{
        border: none;
        outline: none;
        color: #b0b0b0;
        font-size: 0.3rem;
        width: 4.5rem;
        height: 0.5rem;
        background-color: #fff;
        padding: 0 0 0.05rem 0;
        -webkit-appearance: none; /*for chrome*/
        text-indent: 12em;
        /*margin-left: 0.3rem;*/
    }
    select::expand { display: none; }
    .right img{
        width: 0.14rem;
        height: 0.24rem;
    }
    .nianji img{
        width: 0.34rem;
        height: 0.32rem;
        margin-top: -0.1rem;
    }
    .styled-select {
        display: inline;
        /*width: 1.4rem;*/
        height: 0.5rem;
        overflow: hidden;
        /*margin-left: 3.9rem;*/
    }
    .custom-checkbox input[type="checkbox"] {
        -webkit-appearance: none;
        height: 0.32rem;
        vertical-align: sub;
        width: 0.32rem;
        outline: none;
    }
    .custom-checkbox input[type="checkbox"]:checked {
        background: url(../assets/gou.png) no-repeat;
        background-size:100% 100%;
    }
    .custom-checkbox input[type="checkbox"]:not(:checked) {
        background: url(../assets/nogou.png) no-repeat;
        background-size:100% 100%;
    }
    .custom-checkbox input{
        margin-left: 0.3rem;
        border: none;
    }
    .map{
        margin-left: 0;
        width: 0.88rem;
        border: none;
        outline: none;
        color: #999;
        font-size: 0.29rem;
        height: 0.5rem;
        background-color: #fff;
        padding: 0 0 0.05rem 0;
        -webkit-appearance: none; /*for chrome*/
        text-indent: 0;
    }
    .order{
        text-indent: 10em;
    }
    .xiangxi{
        color: #555;
        /*margin-left: 1.2rem;*/
        margin-top: 0.1rem;
        /*overflow: hidden;*/
        /*font-size: 0.28rem;*/
    }
    .xiangxi input{
    	width: 4rem;
        border: none;
        outline: none;
        text-indent: 2.3em;
        font-size: 0.29rem;
    }
    .xia img{
        width: 0.32rem;
        height: 0.32rem;
    }
    .xia{
        margin-right: -0.1rem;
    }
    .switch{
    	margin-top: -0.05rem;
    }
    .panel-footer{
    	border-top: none;
    }
    .zhongKao{
    	border: none;
    	margin-top: 0.2rem;
    	margin-left: 0;
    	width: 6rem;
    	outline: none;
    	resize: none;
    }
    .ads{
    	margin-top: 0.06rem;
    }
    .policy{
    	width: 70%;
    }
</style>
